import { Layout, Menu } from "antd";
import React, { createContext, useState } from "react";
import { Outlet } from "react-router";
import { useLocation } from "react-router-dom";
import Banner from "@/components/banner";
import SiderComponent from "@/components/Sider";
const { Header, Sider, Content } = Layout;

const LayoutWithHeaderSider: React.FC = () => {
  const location = useLocation(); // 获取当前路由，用于高亮菜单
  const [collapsed, setCollapsed] = useState(false);

  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Header>
        <Banner />
      </Header>
      <Layout>
        <Sider
          width="300px"
          collapsible
          collapsed={collapsed}
          onCollapse={(value) => setCollapsed(value)}
        >
          <SiderComponent />
        </Sider>
        <Content>
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};

export default LayoutWithHeaderSider;
